<template>
  <div class="msite_shop_list">
      <div class="shop_header">
        <i class="iconfont icon-xuanxiang"></i>
        <span class="shop_header_title">附近商家</span>
      </div>
      <div class="shop_container">
        <ul class="shop_list" v-if="shops.length">

            <router-link class="shop_li border-1px"
             tag="li" to="/shop" v-for="(item,index) in shops" :key="index">
            <a>
              <div class="shop_left">
                <img class="shop_img" :src="baseImgUrl+item.image_path">
              </div>
              <div class="shop_right">
                <section class="shop_detail_header">
                  <h4 class="shop_title ellipsis">{{item.name}}</h4>
                  <ul class="shop_detail_ul">
                    <li class="supports" v-for="item in item.supports" :key="item.id">{{item.icon_name}}</li>
                  </ul>
                </section>
                <section class="shop_rating_order">
                  <section class="shop_rating_order_left">
                    <Star :score="item.rating" :size="24"></Star>
                    <div class="rating_section">
                      {{item.rating}}
                    </div>
                    <div class="order_section">
                      月售{{item.recent_order_num}}单
                    </div>
                  </section>
                  <section class="shop_rating_order_right">
                    <span class="delivery_style delivery_right">{{item.delivery_mode.text}}</span>
                  </section>
                </section>
                <section class="shop_distance">
                  <p class="shop_delivery_msg">
                    <span>¥{{item.float_mininum_order_amount}}起送</span>
                    <span class="segmentation">/</span>
                    <span>{{item.piecewise_agent_fee.tips}}</span>
                  </p>
                </section>
              </div>
            </a>

         </router-link>

        </ul>
      </div>
    </div>
</template>

<script>
import Star from '../Star/Star'
import { mapState } from 'vuex'

export default {
  data () {
    return {
      baseImgUrl: 'http://cangdu.org:8001/img/'
    }
  },
  created () {
    this.$store.dispatch('getShops')
  },
  computed: {
    ...mapState(['shops'])
  },
  components: {
    Star
  }
}
</script>

<style lang="stylus" rel="lang/stylus">
 @import 'http://at.alicdn.com/t/font_518606_6676bmcalnrhehfr.css'
</style>
